import React, { useState } from 'react';
import NoUiSlider from '../../components/NoUiSlider';
import '../common.css';
import './styles.css';

const BasicSlider = () => {
  const [value, setValue] = useState(50);

  const handleChange = (values) => {
    setValue(values[0]);
  };

  const handleEnd = (values) => {
    console.log('滑块结束时的值:', values[0]);
    console.log('滑块范围:', {
      min: 0,
      max: 100,
      current: values[0]
    });
  };

  return (
    <div className="basic-slider-container">
      <h2>基础单滑块示例</h2>
      <div className="slider-wrapper">
        <NoUiSlider
          start={[value]}
          range={{
            min: 0,
            max: 100
          }}
          connect={[true, false]}
          onChange={handleChange}
          onEnd={handleEnd}
          tooltips={true}
        />
        <div className="value-display">
          当前值: {value}
        </div>
      </div>
    </div>
  );
};

export default BasicSlider; 